<script lang="ts" setup>
import { defineProps, defineEmits } from "vue"

import type { TodoItem } from "../../index"

const props = defineProps<{
  item: TodoItem
  index: number
}>()

const Emit = defineEmits<{
  (e: "removeTodoEvent", index: number): void
  (e: "todoCheckStatusChangeEvent"): void
}>()

const removeTodo = () => {
  Emit("removeTodoEvent", props.index)
}
const todoCheckStatusChange = () => {
  Emit("todoCheckStatusChangeEvent")
  props.item.isCheck = !props.item.isCheck
}
</script>

<template>
  <div class="item">
    <input
      type="checkbox"
      :name="item.name"
      :id="item.name"
      :value="item.name"
      :checked="item.isCheck"
      @change="todoCheckStatusChange"
    />
    <label :for="item.name">{{ item.name }}</label>
    <button @click="removeTodo">删除</button>
  </div>
</template>

<style scoped>
button {
  margin-left: 50px;
}

.item {
  margin-top: 20px;
}

label {
  margin-left: 10px;
}
</style>
